﻿<template>
	<div class="xuanKe-container">
		<el-dialog v-model="isShowDialog" draggable="" fullscreen>
			<template #header>
				<div style="color: #fff">
					<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
					<span>
						{{ props.title }}
					</span>
				</div>
			</template>
			<el-row class="row-con">
				<el-col :span="24" v-for="kecheng in tableData">
					<el-card class="card" style="margin-top: 8px">
						<template #header>
							<div class="card-header">
								<span>{{ kecheng.name }}</span>
								<el-button type="primary" @click="submit(kecheng.id)" v-if="kecheng.lvquRenshu<kecheng.zhaoshengRenshu && !xuankeTask.isYuxuan && xuankeTask.xuankeActive">选 择</el-button>
								<span v-if="xuankeTask.isYuxuan">预选学生禁止选课</span> 
            					<span v-if="!xuankeTask.xuankeActive">选课未开启，选课开始时间{{xuankeTask.startTime}},选课结束时间{{xuankeTask.endTime}}</span> 
							</div>
						</template>
						<div class="text item">
							<span>上课老师：{{ kecheng.teacherIdName }}</span>
						</div>
						<div class="text item">
							<span>上课地点：{{ kecheng.address }}</span>
						</div>
						<div class="text item">
							<span>招生人数：{{ kecheng.zhaoshengRenshu }}</span>
						</div>
						<div class="text item">
							<span>已录取人数：{{ kecheng.lvquRenshu }}</span>
						</div>
						<div class="text item">
							<span>备注：{{ kecheng.remark }}</span>
						</div>
						<div class="text item">
							<span>课程介绍：{{ kecheng.description }}</span>
						</div>
							
					</el-card>
				</el-col>
			</el-row>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
	import { ref,onMounted } from "vue";
	import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import { listKecheng,saveXuanke } from "/@/api/main/myXuanke";

	//父级传递来的参数
	var props = defineProps({
		title: {
		type: String,
		default: "",
	},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const ruleFormRef = ref();
	const isShowDialog = ref(false);
	const ruleForm = ref<any>({});
	//自行添加其他规则
	const rules = ref<FormRules>({
	});

	const xuankeId = ref(0);
	const xuankeTask = ref(null);
	const tableData = ref<any>([]);

	// 打开弹窗
	const openDialog = async (row: any) => {
		xuankeTask.value = row;
		xuankeId.value = row.id;
		tableData.value = (await listKecheng({id:xuankeId.value})).data.result ?? [];
		isShowDialog.value = true;
	};

	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadTable");
		isShowDialog.value = false;
	};

	// 取消
	const cancel = () => {
		isShowDialog.value = false;
		closeDialog();
	};

	// 提交
	const submit = async (id:any) => {
		await saveXuanke({xuankeId:xuankeId.value,kechengId:id})
		closeDialog();
	};

	// 页面加载时
	onMounted(async () => {
	});

	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>




